<template>
  <div>
    <div class="login-page">
    <img class="loginLogo" src="@/assets/images/logo.png" alt="">
      <el-card class="el-card">
        <div class="loginTitle">
          <p>后台管理系统</p>
          <a @click="change" href="javascript:;">{{activeName? '去注册': '去登录'}}</a>
        </div>
        <!-- 登录组件 -->
        <div v-if="activeName===true">
          <AddLogin></AddLogin>
        </div>
        <!-- 注册组件 -->
        <div v-if="activeName===false">
          <AddRegister></AddRegister>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import AddRegister from './components/add-register.vue'
import AddLogin from './components/add-login.vue'
export default {
  name: 'RegisterIndex',
  components: {
    AddRegister, AddLogin
  },
  data () {
    return {
      activeName: true
    }
  },
  methods: {
    change () {
      this.activeName = !this.activeName
    }
  }
}
</script>

<style lang="less" scoped>
*{
  margin: 0;
  padding: 0;
}
.loginLogo{
  position: fixed;
  left: 30px;
  top: 20px;
}
.login-page{
  min-height: 100vh;
  background: url(@/assets/images/login_bg.jpg) no-repeat center / cover;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.el-card {
  width: 420px;
    a{
      text-decoration: none;
      color: blue;
      font-size: 12px;
    }
  // 深度作用选择器   ::v-deep   /deep/
  ::v-deep .el-card__header {
    // background: rgba(114,124,245,1);
    text-align: center;
    color: black;
    font-size: 20px;
  }
  .loginButton{
    width: 380px;
  }
  .loginTitle{
    text-align: center;
    margin: 20px;
      p{
        font-size: 24px;
        font-weight: 600;
      }
  }
}
</style>
